<template>
  <div>
    <topBar title="分类"></topBar>
    <div class="cates_box">
      <div class="cate_box" v-for="item in cate_list" :key="item" @click="$goPage('/cate_list?id='+item.cid)">
        <img :src="item.c_img">
        <div>
          <div class="cate_name">{{ item.c_name }}</div>
          <div>{{ item.book_count }}菜</div>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
import topBar from "@/components/TopBar";

export default {
  name: "CategoryView.vue",
  components: {
    topBar,
  },
  data() {
    return {
      cate_list: []
    }
  },
  mounted() {
    this.get_cate_info()
  },
  methods: {
    get_cate_info() {
      this.$axios.get("business/classify/").then(res => {
        if (res.data.code == 200) {
          this.cate_list = res.data.data
        }
      })
    },
  }
}
</script>

<style scoped>
.cates_box {
  display: flex;
  justify-content: space-between;
  flex-wrap: wrap;
  padding: 20px 15px;
}

.cate_box {
  width: calc(50% - 10px);
  padding: 10px 15px;
  display: flex;
  align-items: center;
  background-color: rgb(242, 242, 242);
  margin: 5px;
  border-radius: 5px;
}

.cate_box img {
  width: 50px;
  height: 75px;
  border-radius: 2px;
  margin-right: 8px;
}

.cate_name {
  color: #000000;
  font-weight: bold;
  margin-bottom: 20px;
}
</style>